<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
                :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="never">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="年份" prop="year">
              <el-date-picker
                date-format="YYYY"
                value-format="YYYY"
                type='year'
                v-model="queryParams.year"
                style="width: 160px"
              />
            </el-form-item>
            <el-form-item label="预算部门" prop="deptName">
              <el-input :placeholder="queryParams.deptName" clearable
                        style="width: 160px" :disabled="true" />
            </el-form-item>
<!--            <el-form-item label="预算科目编码" prop="subjectCode" label-width="100">-->
<!--              <el-input v-model="queryParams.subjectCode" placeholder="请输入预算科目编码" clearable-->
<!--                        @keyup.enter="handleQuery" style="width: 160px" />-->
<!--            </el-form-item>-->
            <el-form-item label="预算科目名称" prop="subjectName" label-width="100">
              <el-input v-model="queryParams.subjectName" placeholder="请输入预算科目名称" clearable
                        @keyup.enter="handleQuery" style="width: 160px" />
            </el-form-item>
            <el-form-item label="申请主题" prop="applyTheme">
              <el-input v-model="queryParams.applyTheme" placeholder="请输入申请主题" clearable
                        @keyup.enter="handleQuery" style="width: 160px" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain @click="statistics" v-hasPermi="['fill:apply:add']">
              <svg-icon icon-class="NewOutline" />
              <span style="margin-left: 5px">统计</span>
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['fill:apply:export']">
              导出
            </el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table border v-loading="loading" :data="applyList" class="enhanced-table">
        <el-table-column label="主键id" align="center" prop="id" v-if="false" />
        <el-table-column label="部门编号" align="center" prop="deptCode" />
        <el-table-column label="部门名称" align="center" prop="deptName" min-width="120" show-overflow-tooltip />
        <el-table-column label="院区" align="center" prop="yardName" />
        <el-table-column label="申请主题" align="center" prop="applyTheme" min-width="120" show-overflow-tooltip />
        <el-table-column label="预算科目编码" align="center" prop="subjectCode" min-width="120" show-overflow-tooltip />
        <el-table-column label="预算科目名称" align="center" prop="subjectName" min-width="120" show-overflow-tooltip />
        <el-table-column label="申请金额" align="center" prop="applyMoney" width="120" show-overflow-tooltip />
        <el-table-column label="状态" align="center" prop="status" width="100">
          <template #default="scope">
            <dict-tag :options="approval_status" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="170px" />
        <el-table-column label="季度" align="center" prop="quarterName" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                         min-width="100">
          <template #default="scope">
            <el-tooltip content="查看" placement="top">
              <el-button type="success" circle link @click="handleView(scope.row)">
                <svg-icon icon-class="View" />
              </el-button>
            </el-tooltip>
            <el-tooltip content="查看附件" placement="top" v-if="scope.row.ossId!=null">
              <el-button type="success" circle link @click="handleViewFile(scope.row)">
                <svg-icon icon-class="excel2" />
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                  v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
    <!--  统计抽屉页 -->
    <!--    <el-drawer v-model="dialog.visible" direction="ttb" :title="dialog.title" size="100%" :with-header="false">-->
    <!--      <el-card shadow="never" style="margin-bottom: 10px">-->
    <!--        <div style="display: flex;justify-content: space-between">-->
    <!--          <div >-->
    <!--            <el-button type="warning" class="btn" @click="exportAttribute" icon="Download">导出</el-button>-->
    <!--          </div>-->
    <!--          <div class="top-title">-->
    <!--            归口统计-->
    <!--          </div>-->
    <!--          <div>-->
    <!--            <el-button type="danger" class="btn" @click="cancelClick" icon="Close">关闭</el-button>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </el-card>-->

    <!--      <el-table-->
    <!--        border-->
    <!--        :data="tableData"-->
    <!--        v-loading="buttonLoading"-->
    <!--        show-summary-->
    <!--      >-->
    <!--        <el-table-column prop="subjectCode" label="预算科目编码" min-width="150" v-if="false" align="center" />-->
    <!--        <el-table-column prop="subjectName" label="预算科目名称" min-width="150" align="center">-->
    <!--          <template #default="scope">-->
    <!--            <el-tooltip effect="dark" placement="top" :content="scope.row.subjectCode">-->
    <!--              <span class="font-class-red">{{ scope.row.subjectName }}</span>-->
    <!--            </el-tooltip>-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--        <el-table-column v-for="item in titleList" :key="item.key" :label="item.label" align="center">-->
    <!--          <el-table-column v-for="dict in yard_type" :key="dict.value" :label="dict.label"-->
    <!--                           :prop="dict.value+'_'+item.key"-->
    <!--                           align="center" show-overflow-tooltip-->
    <!--          >-->
    <!--          </el-table-column>-->
    <!--        </el-table-column>-->
    <!--        <el-table-column label="合计" align="center">-->
    <!--          <el-table-column v-for="dict in yard_type" :key="dict.value" :label="dict.label" :prop="dict.value+'_total'"-->
    <!--                           align="center" show-overflow-tooltip-->
    <!--          >-->
    <!--          </el-table-column>-->
    <!--          <el-table-column align="center" label="总合计" prop="total" show-overflow-tooltip>-->
    <!--          </el-table-column>-->
    <!--        </el-table-column>-->
    <!--      </el-table>-->
    <!--    </el-drawer>-->

    <el-drawer
      v-model="dialog.visible"
      direction="ttb"
      :title="dialog.title"
      size="100%"
      :with-header="false"
      class="custom-drawer"
      style="background-color: #F8F8FF;height: calc(100vh - 90px);"
    >
      <!-- 操作栏 -->
      <el-card shadow="never" class="action-bar">
        <div class="action-container">
          <el-button
            type="warning"
            class="action-btn"
            @click="exportAttribute"
            icon="Download"
          >
            导出
          </el-button>

          <div class="main-title">
            <span class="title-text">归口统计列表</span>
          </div>

          <el-button
            type="danger"
            class="action-btn"
            @click="cancelClick"
            icon="Close"
          >
            关闭
          </el-button>
        </div>
      </el-card>

      <!-- 数据表格 -->
      <el-card shadow="never" style="height: calc(100vh - 150px);">
        <el-table
          border
          :data="tableData"
          v-loading="buttonLoading"
          show-summary
          class="data-table enhanced-table"
          header-row-class-name="table-header"
        >
          <el-table-column
            prop="subjectCode"
            label="预算科目编码"
            min-width="150"
            v-if="false"
            align="center"
          />

          <!-- 预算科目名称列 -->
          <el-table-column
            prop="subjectName"
            label="预算科目"
            min-width="180"
            align="center"
          >
            <template #default="scope">
              <el-tooltip
                effect="light"
                placement="top-start"
                :content="`科目编码：${scope.row.subjectCode}`"
                popper-class="code-tooltip"
              >
          <span class="subject-name">
            {{ scope.row.subjectName }}
          </span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- 动态列 -->
          <el-table-column
            v-for="item in titleList"
            :key="item.key"
            :label="item.label"
            align="center"
            class-name="dynamic-column"
          >
            <el-table-column
              v-for="dict in yard_type"
              :key="dict.value"
              :label="dict.label"
              :prop="dict.value+'_'+item.key"
              align="center"
              min-width="110"
              show-overflow-tooltip
            />
          </el-table-column>

          <!-- 合计列 -->
          <el-table-column
            label="合计"
            align="center"
            class-name="total-column"
          >
            <el-table-column
              v-for="dict in yard_type"
              :key="dict.value"
              :label="dict.label"
              :prop="dict.value+'_total'"
              align="center"
              min-width="120"
              show-overflow-tooltip
            />
            <el-table-column
              label="总合计"
              prop="total"
              align="center"
              min-width="140"
              class-name="grand-total"
            />
          </el-table-column>
        </el-table>
      </el-card>
    </el-drawer>
  </div>
</template>

<script setup name="Apply" lang="ts">
import { getUser, listApply } from "@/api/fill/apply";
import { ApplyQuery, ApplyVO } from "@/api/fill/apply/types";
import { getYear } from "@/hooks/useDate";
import { getStatisticList } from "@/api/fill/attribute";
import { FillDTO } from "@/api/fill/business/Types";
import { ref } from "vue";
import { titleList } from "@/hooks/useCommon";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { yard_type } = toRefs<any>(proxy?.useDict("yard_type"));
const applyList = ref<ApplyVO[]>([]);
const { approval_status } = toRefs<any>(proxy?.useDict("approval_status"));
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ""
});

/** 查询参数*/
const queryParams = ref<ApplyQuery>({
  pageNum: 1,
  pageSize: 10,
  deptCode: undefined,
  deptName: undefined,
  applyTheme: undefined,
  subjectCode: undefined,
  subjectName: undefined,
  year: getYear(),
  type: 2
});

/** 查询预算申请列表 */
const getList = async () => {
  loading.value = true;
  getUser().then(res => {
    let user = res.data;
    queryParams.value.deptName = user.budgetDeptName;
    queryParams.value.deptCode = user.budgetDeptCode;
  }).then(() => {
    listApply(queryParams.value).then(res => {
      applyList.value = res.data.records;
      total.value = res.data.total;
    });
  }).finally(() => loading.value = false);

};


/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

// 查询参数
const dto = ref<FillDTO>({
  year: undefined,
  yardCode: undefined,
  deptCode: undefined
});
const tableData = ref([]);
const buttonLoading = ref(false);

// 查询赋值
const assignQuery = () => {
  dto.value.deptCode = queryParams.value.deptCode;
  dto.value.year = queryParams.value.year;
};

/** 新增按钮操作 */
const statistics = () => {
  proxy?.$modal.confirm("确定进行统计？").then(() => {
    dialog.visible = true;
    dialog.title = "统计";
    assignQuery();
    buttonLoading.value = true;
    getStatisticList(dto.value).then((res) => {
      tableData.value = res.data;
    }).finally(() => buttonLoading.value = false);
  });

};
const cancelClick = () => {
  dialog.visible = false;
};
/**
 * 查看详情
 * @param row
 */
const handleView = (row?: ApplyVO) => {
  proxy.$tab.closePage(proxy.$route);
  proxy.$router.push({
    path: `/fill/apply/applyFrom/index`,
    query: {
      id: row.id,
      type: "view"
    }
  });
};
/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download("fill/apply/export", {
    ...queryParams.value
  }, `预算申请.xlsx`);
};

/** 导出按钮操作 */
const exportAttribute = () => {
  proxy?.download("fill/apply/exportAttribute", {
    ...queryParams.value
  }, `归口统计表.xlsx`);
};
// 打开文件连接
const handleViewFile = (row: ApplyVO) => {
  window.open(row.url, "_blank");
};
onMounted(() => {
  getList();
});
</script>


<style scoped lang="scss">


/* 抽屉容器 */
.custom-drawer {
  --drawer-bg: #f5f7fa;
  --action-bar-bg: #ffffff;
  --primary-color: #409eff;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
}

/* 操作栏样式 */
.action-bar {
  margin-bottom: 12px;
  border-radius: 8px;
  background: var(--action-bar-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.action-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
}

.action-btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 主标题样式 */
.main-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-text {
  color: #303133;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 25px;
}

:deep(.el-table__row) td {
  transition: background 0.3s ease;
}

:deep(.el-table__row:hover) td {
  background: #fafafa !important;
}

.subject-name {
  color: var(--primary-color);
  font-weight: 500;
  cursor: pointer;
}

/* 特殊列样式 */
:deep(.dynamic-column) .cell {
  font-weight: bolder;

}

:deep(.total-column) .cell {
  font-weight: 600;
  color: var(--warning-color);
}

:deep(.grand-total) .cell {
  font-weight: 700;
  color: var(--danger-color);
}
</style>

